<template>
  <div class="body">
    <el-form v-loading="loading.form" class="form" :model="form">
      <div class="web_title">
        {{ form.id == 0 ? "渠道添加" : "渠道修改" }}
      </div>
      <el-form-item
        :rules="[{ required: true, message: '渠道名称不能为空' }]"
        label="渠道名称"
        :label-width="fromViewCofing.label_width"
        prop="name"
      >
        <el-input v-model="form.name" class="inp" placeholder="请输入内容" />
      </el-form-item>

      <el-form-item
        :rules="[{ required: true, message: '结算方式不能为空' }]"
        label="结算方式"
        :label-width="fromViewCofing.label_width"
        prop="calculation_type"
      >
        <el-select
          v-model="form.calculation_type"
          :disabled="form.id != 0"
          placeholder="请选择"
        >
          <el-option
            v-for="item in calculation_type_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        :rules="[{ required: true, message: '合作价格 不能为空' }]"
        label="合作价格"
        :label-width="fromViewCofing.label_width"
        prop="cooperative_price"
      >
        <el-input
          v-model="form.cooperative_price"
          placeholder="请输入内容"
          type="number"
          class="inp"
        />
      </el-form-item>

      <el-form-item
        v-if="
          form.calculation_type == 'semi_process_cps_share' ||
          form.calculation_type == 'semi_process_fixed_price' ||
          form.calculation_type == 'full_process_cps_share' ||
          form.calculation_type == 'full_process_fixed_price'
        "
        :rules="[{ required: true, message: '产品最低合作价格 不能为空' }]"
        label="产品最低合作价格"
        :label-width="fromViewCofing.label_width"
        prop="products_cooperative_price_min"
      >
        <el-input
          v-model="form.products_cooperative_price_min"
          placeholder="请输入产品最低合作价格"
          type="number"
          class="inp"
        />
        <span style="color: #bdbdbd"> 【0】 则不做无限制</span>
      </el-form-item>

<!--      <el-form-item label="扣量方式" :label-width="fromViewCofing.label_width" prop="discount_type">-->
      <el-form-item label="扣量方式" :rules="[{ required: true, message: '请选择扣量方式' }]" :label-width="fromViewCofing.label_width" prop="discount_type">
        <el-radio-group v-model="form.discount_type">
          <el-radio :label="0">百分比</el-radio>
          <el-radio :label="1">固定价格</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="全国扣量" :rules="[{ required: true, message: '请输入全国扣量价格' }]"
                    :label-width="fromViewCofing.label_width" prop="nationwide_discount_cost" v-if="form.discount_type === 1">
        <el-input
          v-model="form.nationwide_discount_cost"
          placeholder="请输入内容"
          type="number"
          class="inp"
        />
      </el-form-item>

      <el-form-item label="地区扣量" :rules="[{ required: true, message: '请输入地区扣量价格' }]"
                    :label-width="fromViewCofing.label_width" prop="region_discount_cost" v-if="form.discount_type === 1">
        <el-input
          v-model="form.region_discount_cost"
          placeholder="请输入内容"
          type="number"
          class="inp"
        />
      </el-form-item>

      <el-form-item
        :rules="[{ required: true, message: '扣量 不能为空' }]"
        label="扣量"
        :label-width="fromViewCofing.label_width"
        prop="discount_cost"
        v-if="form.discount_type === 0"
      >
        <el-input
          v-model="form.discount_cost"
          placeholder="请输入扣量"
          type="number"
          min="1"
          max="100"
          class="inp"
        >
          <template slot="append">%</template>
        </el-input>
      </el-form-item>

      <el-form-item
        v-if="
          form.calculation_type == 'semi_process_cps_share' ||
          form.calculation_type == 'full_process_cps_share'
        "
        :rules="[{ required: true, message: '渠道方分成比例 不能为空' }]"
        label="渠道方分成比例"
        :label-width="fromViewCofing.label_width"
        prop="cooperative_price"
      >
        <el-input
          v-model="form.proportion"
          placeholder="请输入渠道方分成比例"
          type="number"
          min="1"
          max="100"
          class="inp"
        >
          <template slot="append">%</template>
        </el-input>
      </el-form-item>

      <el-form-item label="备注" :label-width="fromViewCofing.label_width">
        <el-input
          v-model="form.remark"
          type="textarea"
          class="inp"
          placeholder="请输入内容"
        />
      </el-form-item>

      <el-form-item
        v-if="
          form.calculation_type == 'semi_process_cps_share' ||
          form.calculation_type == 'semi_process_fixed_price'
        "
        label="回调方法"
        :label-width="fromViewCofing.label_width"
      >
        <el-select
          v-model="form.semi_callback_fun"
          class="inp"
          placeholder="请选择回调方法"
          clearable
        >
          <el-option label="默认回调" value="currentSpCallback">
          </el-option>
        </el-select>
        <!-- <el-input
          v-model="form.semi_callback_fun"
          class="inp"
          placeholder="请输入回调方法"
        /> -->
      </el-form-item>

      <el-form-item
        v-if="
          form.calculation_type == 'semi_process_cps_share' ||
          form.calculation_type == 'semi_process_fixed_price'
        "
        label="回调url"
        :label-width="fromViewCofing.label_width"
      >
        <el-input
          v-model="form.semi_callback_url"
          class="inp"
          placeholder="回调url"
        />
      </el-form-item>

      <el-form-item
        label="屏蔽机构类型"
        :label-width="fromViewCofing.label_width"
        prop="blocked_org_type"
      >
        <el-select
          v-model="form.blocked_org_type"
          class="inp"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in blocked_org_type_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        :rules="[{ required: true, message: '个人信息 不能为空' }]"
        label="个人信息"
        :label-width="fromViewCofing.label_width"
        prop="page_personal_mode"
      >
        <el-radio-group v-model="form.page_personal_mode">
          <el-radio label="1">性别年龄</el-radio>
          <el-radio label="2">身份证</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        :rules="[{ required: true, message: '资产信息 不能为空' }]"
        label="资产信息"
        :label-width="fromViewCofing.label_width"
        prop="page_property_mode"
      >
        <el-radio-group v-model="form.page_property_mode">
          <el-radio label="1">有/无</el-radio>
          <el-radio label="2">多选</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        :rules="[{ required: true, message: '主题 不能为空' }]"
        label="主题选择"
        :label-width="fromViewCofing.label_width"
        prop="theme"
      >
        <el-radio-group v-model="form.theme">
          <el-radio label="1">主题1</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="form.calculation_type == 'uv' || form.calculation_type == 'cpa'"
        label="落地页地址"
        :label-width="fromViewCofing.label_width"
        prop="page_property_mode"
      >
        <el-link v-if="form.id == 0" type="primary" disabled
          >保存后的展示落地页地址</el-link
        >
        <el-link v-else type="primary" @click="copyText(h5_url)"
          >{{ h5_url }}
        </el-link>
        <span style="color: #bdbdbd; padding-left: 20px; font-size: 12px"
          >点击复制</span
        >
      </el-form-item>

      <el-form-item
        v-else-if="user_id == 2"
        label="签名："
        :label-width="fromViewCofing.label_width"
      >
      <div style="display: flex">
        <div style="width: 100px; text-align: right; padding-right: 10px">
          apiUrl:
        </div>
        <el-link
          v-if="form.id > 0"
          type="primary"
          @click="copyText(api_url)"
          >{{ api_url }}</el-link
        >
        <el-link v-else type="primary" disabled>保存后的展示</el-link>
        <span style="color: #bdbdbd; padding-left: 20px; font-size: 12px"
          >点击复制</span
        >
      </div>
        <div style="display: flex">
          <div style="width: 100px; text-align: right; padding-right: 10px">
            app_key:
          </div>
          <el-link
            v-if="form.id > 0"
            type="primary"
            @click="copyText(form.app_key)"
            >{{ form.app_key }}</el-link
          >
          <el-link v-else type="primary" disabled>保存后的展示</el-link>
          <span style="color: #bdbdbd; padding-left: 20px; font-size: 12px"
            >点击复制</span
          >
        </div>

        <div style="display: flex">
          <div style="width: 100px; text-align: right; padding-right: 10px">
            app_secret:
          </div>
          <el-link
            v-if="form.id > 0"
            type="primary"
            @click="copyText(form.app_secret)"
            >{{ form.app_secret }}</el-link
          >
          <el-link v-else type="primary" disabled>保存后的展示</el-link>

          <span style="color: #bdbdbd; padding-left: 20px; font-size: 12px"
            >点击复制</span
          >
        </div>
      </el-form-item>
      <el-form-item
        v-if="user_id == 2"
        :rules="[{ required: true, message: 'IP白名单不能为空' }]"
        label="IP白名单"
        :label-width="fromViewCofing.label_width"
      >
        <el-input
          v-model="form.whitelist_ip"
          class="inp"
          style="width: 600px"
          placeholder="请输IP白名单"
        />
      </el-form-item>

      <div class="form_footer">
        <el-button type="success" @click="fromSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { encrypt } from "@/utils/encryptUtil";
import { getConfigCurrent, getUserId } from "@/utils/appUtil";
// import { arrayToString, stringToArray } from "@/utils/arrayUtil";
import { apiChannelCreate, apiChannelDetails } from "@/api/apiChannel";
export default {
  name: "Index",
  data() {
    return {
      init_form: {
        id: 0,
        name: "",
        remark: "",
        calculation_type: "",
        cooperative_price: "",
        discount_type: 0,     // 扣量方式
        discount_cost: "80",
        nationwide_discount_cost: 0,
        region_discount_cost: 0,
        proportion: "70",
        products_cooperative_price_min: 0,
        page_personal_mode: "1",
        page_property_mode: "1",
        theme: "1",
        app_key: "",
        app_secret: "",
        h5_url: "",
        whitelist_ip: "",
        blocked_org_type: [],
        semi_callback_fun: "",
        semi_callback_url: "",
      },
      form: {},
      calculation_type_options: [],
      blocked_org_type_options: [],
      fromViewCofing: {
        input_width: "120px",
        label_width: "160px",
      },
      api_url: "",
      loading: {
        form: false,
      },
      user_id: 0,
    };
  },
  created() {
    const _this = this;
    var params = this.$route.query;
    this.form = { ...this.init_form };
    if (params.id != 0) {
      this.req_details(params.id);
    } else {
    }

    this.user_id = getUserId();
    getConfigCurrent().then((response) => {
      // console.log(response, 'response')
      _this.calculation_type_options = response["channel"]["type_v1"];
      _this.blocked_org_type_options = response?.organization?.loantype || [];
    });

    // this.calculation_type_options
  },
  methods: {
    /** 表单提交 */
    fromSubmit() {
      const _this = this;
      _this.loading_start("form");
      var form = this.form;
      var param = {};
      param["id"] = form.id;
      param["name"] = form.name;
      param["calculation_type"] = form.calculation_type;
      param["cooperative_price"] = form.cooperative_price;
      param["products_cooperative_price_min"] =
        form.products_cooperative_price_min;
      param["discount_type"] = form.discount_type;
      param["discount_cost"] = form.discount_cost;
      param["nationwide_discount_cost"] = form.nationwide_discount_cost;
      param["region_discount_cost"] = form.region_discount_cost;
      param["proportion"] = form.proportion;
      param["whitelist_ip"] = form.whitelist_ip;
      param["page_show_age"] = 1;
      param["page_show_gender"] = 1;
      param["page_show_identity"] = 0;
      if (form.page_personal_mode == "2") {
        param["page_show_age"] = 0;
        param["page_show_gender"] = 0;
        param["page_show_identity"] = 1;
      }
      param["page_property_mode"] = form.page_property_mode;
      param["blocked_org_type"] = form.blocked_org_type.join(",");
      param["theme"] = form.theme;
      param["remark"] = form.remark;
      param["semi_callback_fun"] = form.semi_callback_fun;
      param["semi_callback_url"] = form.semi_callback_url;
      // param["app_key"] = form.app_key;
      // param["app_secret"] = form.app_secret;
      apiChannelCreate(param)
        .then((response) => {
          _this.loading_end("form");
          _this.$message({
            message: response.msg,
            type: "success",
          });
          var channel = response["data"]["channel"];
          var id = channel["id"];
          if (param["id"] == 0) {
            this.$router.push({ path: "/channel/update", query: { id: id } });
          } else {
            setTimeout(() => {
              window.location.reload();
            }, 2000);
          }
        })
        .catch(function (result) {
          _this.loading_end("form");
        });
    },

    // 获取详情
    req_details(id) {
      if (!id) {
        return;
      }
      const _this = this;
      _this.loading_start("form");
      apiChannelDetails({
        id: id,
      })
        .then((response) => {
          const result = response.data.details;
          const h5_url = response.data.h5_url;
          _this.loading_end("form");
          var form = _this.form;
          form.id = result.id;
          form.name = result.name;
          form.remark = result.remark;
          if (result.blocked_org_type) {
            form.blocked_org_type = result.blocked_org_type.split(",");
          } else {
            form.blocked_org_type = [];
          }

          form.calculation_type = result.calculation_type;
          form.cooperative_price = result.cooperative_price;
          form.app_key = result.app_key;
          form.app_secret = result.app_secret;
          form.page_personal_mode = "1";
          form.discount_type = result.discount_type || 0;
          form.discount_cost = result.discount_cost;
          form.nationwide_discount_cost = result.nationwide_discount_cost || 0;
          form.region_discount_cost = result.region_discount_cost || 0;
          form.proportion = result.proportion;
          form.whitelist_ip = result.whitelist_ip;
          form.semi_callback_fun = result.semi_callback_fun;
          form.semi_callback_url = result.semi_callback_url;
          form.products_cooperative_price_min =
            result.products_cooperative_price_min;
          if (result.page_show_identity == 1) {
            form.page_personal_mode = "2";
          }
          form.page_property_mode = result.page_property_mode.toString();
          form.theme = result.theme.toString();
          this.h5_url = h5_url + "?cid=" + form.app_key;
          console.log(response.data,'response.data')
          this.api_url = response.data.api_url;
          _this.form = form;
        })
        .catch(function (result) {
          _this.$message.error(result.msg);
        });
    },
    // 获取UUID
    generateUUID() {
      var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          const r = (Math.random() * 16) | 0;
          const v = c === "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );

      return encrypt(uuid);
    },
    /** 复制文本 */
    copyText(text) {
      console.log(text, "text");
      const input = document.createElement("input");
      input.value = text;
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
      this.$message({
        message: "复制成功",
        type: "success",
      });
    },
    // 加载开始...
    loading_start(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = true;
          setTimeout(() => {
            this.loading[key] = false;
          }, 5000);
        });
      } else {
        this.loading[keys] = true;
        setTimeout(() => {
          this.loading[keys] = false;
        }, 5000);
      }
    },
    // 加载结束...
    loading_end(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.$nextTick(() => {
            this.loading[key] = false;
          });
        });
      } else {
        this.$nextTick(() => {
          this.loading[keys] = false;
        });
      }
    },
  },
};
</script>

<style lang="scss"></style>
